//显示具体数据的方法
$(function(){
    $.getJSON('../json/myFans.json',function(response){
        var pageSize=response.length 
        var ul=document.getElementById('myFans')
        var strHTML=''
        for(var i=0 ; i<pageSize ; i++){
            if(response[i]){
                strHTML+=`<li>
                            <div class="left">
                                <img src="${response[i].image}" alt=""> 
                                <input type="button" value="+关注" class="guanzhu test" ">
                                
                            </div>
                            <div class="right">
                                <a href="" class="userId">${response[i].username}</a>
                                <p>菜谱${response[i].userFans}</p>
                                <p>粉丝${response[i].userMenu}</p>
                            </div>
                        </li>`
            }
        }
        ul.innerHTML=strHTML
    })
    $('#myFans').on('click','.guanzhu',function(){
        if($(this).hasClass('test')){
            $(this).removeClass('test').addClass('active');
            $(this).val("已关注")
        }else if($(this).hasClass('active')){
            $(this).removeClass('active').addClass('test');
            $(this).val("+关注")
        }
    })

})